<script setup lang="ts">
import { ref } from 'vue'
import { EntityIdInput } from '../base'
import type { ATSRoute } from './types'
import { getWaypointATSRouteSet } from './atsroute-index'

const id = ref<string | null>(null)
const wpt = ref<string | null>(null)

function filter(lst: ATSRoute[]): ATSRoute[] {
  const id_ = id.value?.trim()?.toLowerCase()
  const checkId = !(!id_ || id_.length === 0)
  const wpt_ = wpt.value
  let ars: Set<ATSRoute> | null = null
  if (wpt_ && wpt_.length > 0) {
    ars = getWaypointATSRouteSet(wpt_) || null
  }
  if (!checkId && !ars) {
    return lst
  }
  return lst.filter((e) => {
    if (checkId && e.id.toLowerCase().indexOf(id_) < 0) {
      return false
    }
    if (ars && !ars.has(e)) {
      return false
    }
    return true
  })
}
defineExpose({ filter })
</script>
<template>
  <div class="row">
    <div class="txt-box col-2em">id</div>
    <input class="input col-9em" v-model="id" placeholder="模糊匹配" />
    <div class="txt-box col-4em" style="margin-left: 1em">航路点</div>
    <EntityIdInput class="col-9em" v-model="wpt" placeholder="精确匹配" type="Waypoint" />
    <!-- <input class="input col-9em" v-model="wpt" placeholder="精确匹配" /> -->
  </div>
</template>
